<template>
  <div>
    <v-touch class="swiper-div" @swiperight="onSwiperRight" :swipe-options="{direction: 'horizontal'}">
      <head-top title="选择商品" background-color="#FFFFFF" v-on:leftClickEvent="toChoose"></head-top>
      <div class="search-div div-align-justify-center">
        <div class="search-div-left div-align-justify-center">
          <img class="icon-16" src="@/static/icon/search.png" alt=""/>
        </div>
        <div class="search-div-middle div-align-justify-center">
          <form @submit.prevent="formSubmit" action="javascript:return true">
            <input type="search" v-model="searchValue" placeholder="搜索商品" @keyup.13="onSearch">
          </form>
        </div>
        <div class="search-div-right div-align-justify-center" @click="onScanner">
          <div class="search-div-right-scanner">
            <img class="icon-16" src="@/static/icon/scanner.png" alt=""/>
          </div>
        </div>
      </div>
      <item-list :key="key.choose"
               :search-value="searchValue"
               :product-code="productCode"
               :list-code="this.GLOBAL.listType.product"
               :list-item-code="this.GLOBAL.listItemType.product.choose"
    ></item-list>
    </v-touch>
  </div>
</template>

<script>
import ItemList from "@/components/ItemList";
import HeadTop from "@/components/HeadTop"

export default {
  name: "ProductViewChoose",
  components: {
    HeadTop,
    ItemList,
  },
  data() {
    return {
      key: {
        choose: new Date().getTime()
      },
      searchValue: this.$route.query.searchValue,
      productCode: this.$route.query.productCode,
    }
  },
  mounted() {
  },
  methods: {
    formSubmit () { return false },
    toChoose() {
      this.$router.replace({
        path: this.GLOBAL.pathSetting.order.add,
        query: {
          productId: this.$route.query.id,
          srcUrl: this.$route.query.srcUrl,
        }
      })
    },
    onSearch() {
      this.key.choose = new Date().getTime()
    },
    onScanner() {
      this.$router.replace({
            path: this.GLOBAL.pathSetting.product.scanner,
            query: {
              srcUrl: this.GLOBAL.pathSetting.product.choose,
              type: 1
            }
          })
    },
    onSwiperRight() {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped>
.search-div {
  width: 343px;
  height: 38px;
  /*padding: 8px 8px 8px 0px;*/
  margin: 0 16px;
  background: #F5F5F5;
  border-radius: 8px;
}
.search-div-left {
  width: 10%;
  height: 38px;
}
.search-div-middle {
  width: 80%;
  padding-right: 8px;
}
.search-div-right {
  width: 10%;
  height: 38px;

}
.search-div-right-scanner {
  padding: 4px 8px;
  border-left: 0.5px solid #b3b3b3;
}
input {
  width: 280px;
  height: 22px;
  border: none;
  background: #F5F5F5;
}
</style>